<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> </title>
</head>
<body>
    <div class="container" id="show_search">
        <div id="fans_data">

        </div>
        <div id="page">

        </div>
    </div>
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script src="../static/js/home.js" th:src="@{/js/home.js}"></script>

    <script th:inline="javascript">
        // 发送请求到后台去请求粉丝的数据
        // 如何获取当前id，
        var id = [[${session.user.id}]];
        $(function () {
            $.ajax({
                url:'/u/fans/'+id+'/1',
                type:'get',
                success:function (data) {
                    render(data);
                }
            })
        })


        /**
         * 渲染数据，展示粉丝的数据
         * @param data
         */
        function render(data) {
            // page
            // page.list 构建数据  page 分页数据 分页模型构建出来
            var len = data.list.length;
            var dataHtml = '';
            for(var i = 0 ; i < len ; i ++){
                dataHtml += '<div>'+data.list[i].nickname+'</div>'
            }

            $('#fans_data').empty().html(dataHtml);


            var html = '<span><a href="">上一页</a>' ;

            var pages = data.pages;
            for(var i = 0 ; i < pages ; i ++){
                html += ' <a href="javascript:void(0)">'+(i+1)+'</a>';
            }
            html += '<a href="">下一页</a></span>';

            $('#page').empty().html(html);

        }
        // 我们后面要发送一个页码过去
        $(document).on('click','#page a',function () {
            // 替换page
            var pageNum = $(this).html();
            $.ajax({
                url:'/u/fans/'+id+'/'+pageNum,
                type:'get',
                success:function (data) {
                    render(data);
                }
            })
        })
    </script>

</body>
</html>